<script setup>

import {ref} from "vue";
import {showToast} from "vant";
import {useRouter} from "vue-router";
const router=useRouter();

const menuRef = ref(null);
const itemRef = ref(null);
const value = ref(0);
const switch1 = ref(false);
const switch2 = ref(false);
const switch3 = ref(false);
const switch4 = ref(false);
const options = [
  { text: '寄存物品类别', value: 0 },
  { text: '生鲜类', value: 1 },
  { text: '旅游用品类', value: 2 },
  { text: '生活用品类', value: 3 },
  { text: '大件物品类', value: 4 },
];
const onConfirm = () => {
  itemRef.value.toggle();
  // 或者
  // menuRef.value.close();
};

const editingContact = ref({
  tel: '',
  name: '',
});

// 跳转界面的
const onSave = () => {
  // 使用useRouter钩子来访问路由实例
  router.push('/BagData');
};

// 签名
const onClear = () => showToast('clear');
const submit = () => showToast('submit');

const show = ref(false);
const fieldValue = ref('');
const cascaderValue = ref('');
// 选项列表，children 代表子选项，支持多级嵌套
const option = [
  {
    text: '酒店大厅',
    value: '330000',
    children: [{ text: '前台寄存', value: '330100' }],
  },
  {
    text: '酒店办事厅',
    value: '320000',
    children: [{ text: '后勤部寄存', value: '320100' }],
  },
  {
    text: '酒店后厨',
    value: '340000',
    children: [{ text: '后厨间寄存', value: '340100' }],
  },
  {
    text: '保密物品',
    value: '350000',
    children: [{ text: '保密间', value: '350100' }],
  },
];

// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
  show.value = false;
  fieldValue.value = selectedOptions.map((option) => option.text).join('/');
};

 // 选择日期 区间
const date = ref('');
const showed = ref(false);

const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm1 = (values) => {
  const [start, end] = values;
  show.value = false;
  date.value = `${formatDate(start)} - ${formatDate(end)}`;
};

</script>

<template>
  <h1 class="welcome-title">欢迎寄存于本酒店</h1>
  <van-dropdown-menu ref="menuRef">
    <van-dropdown-item v-model="value" :options="options" />
    <van-dropdown-item title="寄存物品数量" ref="itemRef">
      <van-cell center title="大件(1件)">
        <template #right-icon>
          <van-switch v-model="switch1" />
        </template>
      </van-cell>

      <van-cell center title="大件(2件以上)">
        <template #right-icon>
          <van-switch v-model="switch2" />
        </template>
      </van-cell>

      <van-cell center title="小件">
        <template #right-icon>
          <van-switch v-model="switch3" />
        </template>
      </van-cell>

      <van-cell center title="小件(2件以上)">
        <template #right-icon>
          <van-switch v-model="switch4" />
        </template>
      </van-cell>


      <div style="padding: 5px 16px;">
        <van-button type="primary" block round @click="onConfirm">
          确认
        </van-button>
      </div>
    </van-dropdown-item>
  </van-dropdown-menu>

  <van-contact-card type="edit" name="李经理(酒店大厅)" tel="13000000000" :editable="true" />

  <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="寄存方式"
      placeholder="请选择物品寄存方式"
      @click="show = true"
  />
  <van-popup v-model:show="show" round position="bottom">
    <van-cascader
        v-model="cascaderValue"
        title="物品寄存方式"
        :options="option"
        @close="show = false"
        @finish="onFinish"
    />
  </van-popup>
  <br>
  <van-cell title="选择日期区间" :value="date" @click="showed = true" />
  <van-calendar v-model:show="showed" type="range" @confirm="onConfirm1" />

  <h5>请本人确认签字</h5>
  <van-signature pen-color="#ff0000"  @clear="onClear" @submit="submit" />

  <div class="action-buttons">
    <van-button type="primary" round block color="#FF0000" @click="onSave">提交寄存信息</van-button>
  </div>

  <!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
  <van-notice-bar scrollable text="特别贵重物品请随身携带，以防意外丢失给您造成不便！" />

  <!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
  <van-notice-bar
      :scrollable="false"
      text="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。"
  />


</template>

<style scoped>
.welcome-title {
  color: #3f51b5; /* 使用一种鲜明的品牌蓝色 */
  text-align: center;
  margin-bottom: 30px;
}

.action-buttons {
  margin-top: 30px;
}

</style>